<template>
  <div>
    <input type="text">
    <h1>{{ count }}</h1>
    <button @click="add">++</button>
    <h1>{{ doubleCount }}</h1>
  </div>
</template>

<script>


export default {
  data() {
    return {
      count: 99
    }
  },
  methods: {
    add() {
      this.count++
    },
  },
  computed: {
    doubleCount() {
      return this.count * 2
    },
  },
  watch: {
    count(newValue) {
      console.log('newValue  ----->  ', newValue);
    }
  },
  beforeMount() {
    console.log(' 挂载前 ----->  ', document.querySelector('input'));
  },
  mounted() {
    console.log('挂载后  ----->  ', document.querySelector('input'));
  }
}
</script>
